<template>
	<view>
		<div class="top">
			<div class="search" @click="search">
				<image src="../../static/search.png" mode=""></image>
			</div>
		</div>

		<div class="main">
			<view class="sidebar-menu">
				<view v-for="(item, index) in sideItems" :key="index" :class="{'active': activeIndex === index}"
					@click="handleSidebarItemClick(index)">
					{{ item.title }}
				</view>
			</view>
			<view class="main-content">
				<view v-if="activeIndex === 0">
					<div class="content">
						<div class="content">
							<div class="boxs">
								<image src="../../static/images/images/image/儿童文学.jpg" mode="" @click="searchOption"></image>
								<div class="text">儿童文学</div>
							</div>
							<div class="boxs">
								<image src="../../static/images/images/image/儿童绘本.jpg" mode="" @click="searchOption"></image>
								<div class="text">儿童绘本</div>
							</div>
							<div class="boxs">
								<image src="../../static/images/images/image/动漫卡通.jpg" mode="" @click="searchOption"></image>
								<div class="text">动漫卡通</div>
							</div>
							<div class="boxs">
								<image src="../../static/images/images/image/幼儿启蒙.jpg" mode="" @click="searchOption"></image>
								<div class="text">幼儿启蒙</div>
							</div>
							<div class="boxs">
								<image src="../../static/images/images/image/智力开发.jpg" mode="" @click="searchOption"></image>
								<div class="text">智力开发</div>
							</div>
							<div class="boxs">
								<image src="../../static/images/images/image/百科科普.jpg" mode="" @click="searchOption"></image>
								<div class="text">百科科普</div>
							</div>
						</div>
					</div>
				</view>
				<view v-if="activeIndex === 1">
					<div class="content">
						<div class="boxs">
							<image src="../../static/images/images/image/巧克力.jpg" mode="" @click="searchOption"></image>
							<div class="text">巧克力</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/果冻布丁.png" mode="" @click="searchOption"></image>
							<div class="text">果冻布丁</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/薯片膨化.png" mode="" @click="searchOption"></image>
							<div class="text">薯片膨化</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/海味零食.jpg" mode="" @click="searchOption"></image>
							<div class="text">海味零食</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/蜜饯果干.jpg" mode="" @click="searchOption"></image>
							<div class="text">蜜饯果干</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/坚果炒货.jpg" mode="" @click="searchOption"></image>
							<div class="text">坚果炒货</div>
						</div>
					</div>
				</view>
				<view v-if="activeIndex === 2">
					<div class="content">
						<div class="boxs">
							<image src="../../static/images/images/image/一加.jpg" mode="" @click="searchOption"></image>
							<div class="text">一加</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/华为.jpg" mode="" @click="searchOption"></image>
							<div class="text">华为</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/小米.jpg" mode="" @click="searchOption"></image>
							<div class="text">小米</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/荣耀.jpg" mode="" @click="searchOption"></image>
							<div class="text">荣耀</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/OPPO.png" mode="" @click="searchOption"></image>
							<div class="text">OPPO</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/iPhone.jpg" mode="" @click="searchOption"></image>
							<div class="text">iPhone</div>
						</div>
					</div>
				</view>
				<view v-if="activeIndex === 3">
					<div class="content">
						<div class="boxs">
							<image src="../../static/images/images/image/T恤.jpg" mode="" @click="searchOption"></image>
							<div class="text">T恤</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/卫衣.jpg" mode="" @click="searchOption"></image>
							<div class="text">卫衣</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/牛仔裤.jpg" mode="" @click="searchOption"></image>
							<div class="text">牛仔裤</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/短外套.jpg" mode="" @click="searchOption"></image>
							<div class="text">短外套</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/连衣裙.jpg" mode="" @click="searchOption"></image>
							<div class="text">连衣裙</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/针织衫.jpg" mode="" @click="searchOption"></image>
							<div class="text">针织衫</div>
						</div>
					</div>
				</view>
				<view v-if="activeIndex === 4">
					<div class="content">
						<div class="boxs">
							<image src="../../static/images/images/image/男T恤.jpg" mode="" @click="searchOption"></image>
							<div class="text">T恤</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/夹克.png" mode="" @click="searchOption"></image>
							<div class="text">夹克</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/短裤.png" mode="" @click="searchOption"></image>
							<div class="text">短裤</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/男卫衣.png" mode="" @click="searchOption"></image>
							<div class="text">卫衣</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/衬衫.png" mode="" @click="searchOption"></image>
							<div class="text">衬衫</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/男牛仔裤.png" mode="" @click="searchOption"></image>
							<div class="text">牛仔裤</div>
						</div>
					</div>

				</view>
				<view v-if="activeIndex === 5">
					<div class="content">
						<div>暂无商品分类~</div>
					</div>
				</view>
				<view v-if="activeIndex === 6">
					<div class="content">
						<div class="boxs">
							<image src="../../static/images/images/image/收音机.jpg" mode="" @click="detail"></image>
							<div class="text">收音机</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/专业音频.png" mode="" @click="detail"></image>
							<div class="text">专业音频</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/数码相机.png" mode="" @click="detail"></image>
							<div class="text">数码相机</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/智能家居.png" mode="" @click="detail"></image>
							<div class="text">智能家居</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/智能手表.png" mode="" @click="detail"></image>
							<div class="text">智能手表</div>
						</div>
						<div class="boxs">
							<image src="../../static/images/images/image/读卡器.jpg" mode="" @click="detail"></image>
							<div class="text">读卡器</div>
						</div>
					</div>
				</view>
				<view v-if="activeIndex === 7">
					<div class="content">
						<div>暂无商品分类~</div>
					</div>
				</view>
				<view v-if="activeIndex === 8">
					<div class="content">
						<div>暂无商品分类~</div>
					</div>
				</view>
			</view>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: 0,
				sideItems: [{
						title: '图书'
					},
					{
						title: '食品'
					},
					{
						title: '手机'
					},
					{
						title: '女装'
					},
					{
						title: '男装'
					},
					{
						title: '医药'
					},
					{
						title: '数码'
					},
					{
						title: '百货'
					},
					{
						title: '美妆'
					}
				]
			}
		},
		methods: {
			handleSidebarItemClick(index) {
				// 处理侧边栏菜单项点击事件
				console.log('点击了菜单项:', index);
				this.activeIndex = index;
			},
			detail() {
				uni.navigateTo({
					url: "../../detail/detail/detail"
				})
			},
			search(){
				uni.navigateTo({
					url:"../../search/search"
				})
			},
			searchOption(){
				uni.navigateTo({
					url:"../../sortOption/sortOption"
				})
			}

		}
	}
</script>

<style scoped>
	.top {
		width: 100%;
		height: 50px;
		/* background-color: skyblue; */
		/* backgourn-color:white; */
		background-color: #f6f6f6;
		display: flex;
		justify-content: center;
		align-items: center;
		/* border-radius:20px; */
	}

	.search {
		width: 90%;
		height: 40px;
		background-color: white;
		/* background-color: #f6f6f6; */
		border-radius: 30px;
		position: relative;
	}

	.search image {
		display: inline-block;
		width: 30px;
		height: 30px;
		position: absolute;
		top: 5px;
		left: 150px;
	}

	.main {
		display: flex;
		height: 100%;
		background-color: pink;
	}

	.sidebar-menu {
		width: 25%;
		/* height:100vh; */
		height: 100%;
		background-color: #f6f6f6;
	}

	.sidebar-menu view {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		padding: 25px 0;
		/* background-color: skyblue; */
		/* background-color: #27ba9b; */
		background-color:white;
		transition: all 0.5s;
		/* border-top-right-radius:20px; */
	}

	.main-content {
		width: 75%;
		/* background-color: skyblue; */
		background-color: white;
	}

	.active {
		/* color: white; */
		font-size:18px;
		border-top-right-radius: 20px;
		border-bottom-left-radius: 20px;
		transition: all 0.5s;
		border-left: 4px solid #27ba9b;
		/* border-bottom-right-radius:20px; */
	}

	.main-content view {
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		/* justify-content:center; */
		/* align-items:center; */
		transition: all 0.5s;
		/* background-color:blue; */
	}
	.content {
		width: 100%;
		height: 300px;
		/* 		height:100%; */
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		padding: 10px 0px;
	}

	.content image {
		width: 72px;
		height: 72px;
	}

	.content .boxs {
		height: 100px;
		margin: 10px;
	}

	.content .text {
		text-align: center;
		font-size: 15px;
		font-family: "宋体";
		margin-top: 10px;

	}
</style>